<template>
    <div>
        <ul>
            <li :style="{opacity}">欢迎学习vue</li>
            <li>news1 <input type="text" name="" id=""></li>
            <li>news2 <input type="text" name="" id=""></li>
            <li>news3 <input type="text" name="" id=""></li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'NewsVue',
    data(){
        return {
            timer: false,
            opacity:1,
        }
    },
    mounted(){
        // this.timer = window.setInterval(()=>{
        //     this.opacity -= 0.01;
        //     if(this.opacity <= 0){
        //         this.opacity = 1;
        //     }
        // },16);
    },
    beforeDestroy(){
        // window.clearInterval(this.timer);
    },
    deactivated(){
        window.clearInterval(this.timer);
    },
    activated(){
        this.timer = window.setInterval(()=>{
            console.log('@News')
            this.opacity -= 0.01;
            if(this.opacity <= 0){
                this.opacity = 1;
            }
        },16);
    }
}
</script>